<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>开票记录</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="address-rece container">
            <left-nav-bar :active="active"></left-nav-bar>
            <div class="right">
                <!--        <div style="height:91px;"></div>-->
                <div class="line-ti">
                    <div>开票记录</div>
                </div>
                <el-table :data="addressList" style="width: 100%" @row-click="rowClick">
                    <el-table-column prop="name" label="名称" width="180">
                    </el-table-column>
                    <el-table-column prop="price" label="价格" width="180">
                    </el-table-column>
                    <el-table-column prop="create_time" label="开票时间">
                    </el-table-column>
                </el-table>

                <div class="nodata" v-if="addressList.length == 0">
                    <img :src="$global.Image.noOrder" />
                </div>
                <el-pagination background layout="prev, pager, next" :total="page" :size="10">
                </el-pagination>
            </div>
        </div>
        <div style="height: 200px"></div>
    </div>
</template>

<script>
import leftNavBar from "@components/leftNavBar";
import {
    getAddressList,
    getAddressRemove,
    getAddressDefaultSet,
    invoiceOrderList,
    invoiceRecord,
} from "@api/user";

export default {
    components: {
        leftNavBar,
    },
    data() {
        return {
            active: 7,
            page: 1,
            limit: 20,
            addressList: [],
            addressType: "",
        };
    },
    mounted() {
        this.AddressList();
    },
    methods: {
        rowClick(e) {
            console.log(e);
            this.$router.push({
                path: "/billInfoDetail",
                query: {
                    id: e.id,
                },
            });
        },
        /**
         * 获取列表
         *
         */
        AddressList() {
            let that = this;
            invoiceRecord({ page: that.page, limit: that.limit }).then(
                (res) => {
                    that.page = res.data.count;
                    that.addressList = res.data.list;
                }
            );
        },
    },
};
</script>
<style >
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #da213d;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}
.el-pagination {
    margin: 65px 0;
    display: flex;
    justify-content: center;
}
</style>
<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.address-rece {
    /*width: 70%;*/
    margin: 0 auto;
    display: flex;

    .right {
        width: 1000px;
        margin-left: 32px;

        .line-ti {
            width: 100%;
            border-bottom: 1px solid #dbdbdb;
            position: relative;
            &::before {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 72px;
                height: 3px;
                content: "";
                background: $color;
            }
            > div {
                color: #da213d;
                font-size: 18px;
                font-family: MicrosoftYaHei-Bold;
                // width: 90px;
                line-height: 36px;
                font-weight: 600;
                // text-align: center;
            }
        }
        .btn-list {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 45px;
            text-align: center;
            .green {
                width: 270px;
                height: 44px;
                background: #45b39c;
                border-radius: 5px;
                font-size: 16px;
                color: #ffffff;
                line-height: 44px;
                cursor: pointer;
            }
            .blue {
                width: 270px;
                height: 44px;
                background: #3ca9d7;
                border-radius: 5px;
                font-size: 16px;
                color: #ffffff;
                line-height: 44px;
                cursor: pointer;
            }
            .red {
                width: 270px;
                height: 44px;
                background: linear-gradient(143deg, #da213d 0%, #da213d 100%);
                border-radius: 5px;
                font-size: 16px;
                color: #ffffff;
                line-height: 44px;
                cursor: pointer;
            }
        }
        .ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .li {
                margin-top: 30px;
                width: 440px;
                border-radius: 5px;
                border: 1px solid #eaa090;
                padding: 12px 17px;
                box-sizing: border-box;
                .price-date {
                    display: flex;
                    justify-content: space-between;
                    .price {
                        font-size: 16px;
                        color: #da213d;
                        font-weight: bold;
                    }
                    .date {
                        font-size: 14px;
                        color: #999999;
                    }
                }
                .name {
                    margin-top: 6px;
                    font-size: 16px;
                    color: #333333;
                    letter-spacing: 1px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>
